<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>justify-content</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .box {
        
        width: 400px;
        margin: 100px auto 0;
        background:lightskyblue;

        /* flex布局 */
        display: flex;

        /*justify-content:定义了项目在主轴上的对齐方式。*/
        /*语法：justify-content: flex-start | flex-end | center | space-between | space-around;*/

        /*1、flex-start（默认值）：左对齐*/
        /* justify-content: flex-start; */

        /*2、flex-end：右对齐*/
        /* justify-content: flex-end; */

        /*3、center： 居中*/
        /* justify-content: center; */

        /*4、space-between：两端对齐，项目之间的间隔都相等。*/
		/* justify-content: space-between; */

        /*5、space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
        justify-content: space-around;
    }

    .item  {
        height: 30px;
        background: blue;
    }

    .item:first-child {
        width: 70px;
        margin-right: 10px;
    }
    .item:nth-child(2) {
        width: 30px;
        margin-right: 10px;
    }
    .item:last-child {
        width: 120px;
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

</html>